<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 主题展管理 </el-breadcrumb-item>
                <el-breadcrumb-item>参展公司</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="98px">
                    <el-form-item label="软文标题">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="软文简介">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item>

                    <el-form-item label="作者">
                        <el-select v-model="form.region" placeholder="请选择">
                            <el-option key="bbk" label="步步高" value="bbk"></el-option>
                            <el-option key="xtc" label="小天才" value="xtc"></el-option>
                            <el-option key="imoo" label="imoo" value="imoo"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="背景图片">
                        <div class="crop-demo">
                            <img :src="cropImg" class="pre-img" />
                            <div class="crop-demo-btn">
                                选择图片
                                <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
                            </div>
                        </div>

                        <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
                            <vue-cropper
                                ref="cropper"
                                :src="imgSrc"
                                :ready="cropImage"
                                :zoom="cropImage"
                                :cropmove="cropImage"
                                style="width: 100%; height: 300px"
                            ></vue-cropper>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="cancelCrop">取 消</el-button>
                                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                            </span>
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="所属栏目">
                        <el-select v-model="form.region" placeholder="请选择">
                            <el-option key="bbk" label="步步高" value="bbk"></el-option>
                            <el-option key="xtc" label="小天才" value="xtc"></el-option>
                            <el-option key="imoo" label="imoo" value="imoo"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否属于公司">
                        <el-radio-group v-model="form.resource">
                            <el-radio label="是"></el-radio>
                            <el-radio label="否"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否推荐">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="权重值">
                        <el-input v-model="form.name" placeholder="权重值越大，内容越排在前面"></el-input>
                    </el-form-item>
                  

                    <!-- <el-form-item label="日期时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.date1"
                                value-format="yyyy-MM-dd"
                                style="width: 100%"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%"></el-time-picker>
                        </el-col>
                    </el-form-item> -->

                    <!-- <el-form-item label="页面跳转类型" style="width: 1215px">
                        <el-radio-group v-model="form.resource">
                            <el-radio @change="changeRadio" v-for="item in toPathType" :key="item.labelId" :label="item.labelId">{{
                                item.label
                            }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择会展" v-if="radio === 1">
                        <sele-search :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></sele-search>
                    </el-form-item>
                    <el-form-item label="选择个人页" v-if="radio === 2">
                        <sele-search :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></sele-search>
                    </el-form-item>
                    <el-form-item label="选择公司页" v-if="radio === 3">
                        <el-cascader :options="options2" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择匠心人" style="500px" v-if="radio === 4">
                        <el-cascader :options="options2" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择实景页" v-if="radio === 5">
                        <el-cascader :options="options2" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择产品列表页" v-if="radio === 6">
                        <el-cascader :options="options2" clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择产品详情页" v-if="radio === 7">
                        <el-cascader :options="options2" clearable></el-cascader>
                    </el-form-item> -->

                      <el-form-item label="内容" style="width: 1100px">
                        <div class="container">
                            <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" style="min-height: 600px" />
                            <!-- <el-button class="editor-btn" type="primary" @click="submit">提交</el-button> -->
                        </div>
                    </el-form-item>

                   <div v-for="(it,index) in textImgChoiseList"  :key="index">
                        <el-form-item label="富文本图片" style="width: 1215px" >
                        <el-radio-group v-model="linkSkipList[index].linkSkipType">
                            <el-radio @change="changeTextRadio($event,index)" v-for="item in it" :key="item.labelId" :label="item.labelId">{{
                                item.label
                            }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择会展" v-if="linkSkipList[index].linkSkipType === 1">
                        <sele-search @item-click='changeSeleSearch($event,index,1)' :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></sele-search>
                    </el-form-item>
                    <el-form-item label="选择个人页"  @item-click='changeSeleSearch($event,index,2)' v-if="linkSkipList[index].linkSkipType === 2">
                        <sele-search :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></sele-search>
                    </el-form-item>
                    <el-form-item label="选择公司页" v-if="linkSkipList[index].linkSkipType === 3">
                        <el-cascader :options="options3" clearable @change='changeCascader($event,index,3)'></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择匠心人"  style="500px" v-if="linkSkipList[index].linkSkipType === 4">
                        <el-cascader :options="options2" @change='changeCascader($event,index,4)' clearable></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择实景页" v-if="linkSkipList[index].linkSkipType === 5">
                        <el-cascader :options="options2" clearable @change='changeCascader($event,index,5)'></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择产品列表页" v-if="linkSkipList[index].linkSkipType === 6">
                        <el-cascader :options="options2" clearable @change='changeCascader($event,index,6)'></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择产品详情页" v-if="linkSkipList[index].linkSkipType === 7">
                        <el-cascader :options="options2" clearable @change='changeCascader($event,index,7)'></el-cascader>
                    </el-form-item>
                   </div>
                  

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import seleSearch from '../common/sele-search';
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
export default {
    name: 'exhibition',
    components: {
        VueCropper,
        seleSearch,
        mavonEditor
    },
    data() {
        return {
            defaultLength:'',
            defaultObj:{
                linkSkipType:'',
                oneRelevantId:'',
                twoRelevantId:'',
                threeRelevantId:'',
            },
            linkSkipList:[],
            textImgChoiseList:[],
            content: '',
            html: '',
            toPathType: [
                {
                    label: '详情页',
                    labelId: 0
                },
                {
                    label: '会展',
                    labelId: 1
                },
                {
                    label: '时代人物志-个人页',
                    labelId: 2
                },
                {
                    label: '会展-公司页',
                    labelId: 3
                },
                {
                    label: '企业匠心人页',
                    labelId: 4
                },
                {
                    label: '企业公司实景页',
                    labelId: 5
                },
                {
                    label: '会展-公司-产品列表页',
                    labelId: 6
                },
                {
                    label: '会展-公司-产品详情页',
                    labelId: 7
                }
            ],
            placeholder: '请选取',
            nodatatext: '',
            itemlist: [
                {
                    name: 'asdasdsad'
                },
                {
                    name: 'asdasdsad'
                },
                {
                    name: 'asdasdsad'
                },
                {
                    name: 'asdasdsad'
                },
                {
                    name: 'asdasdsad'
                },
                {
                    name: 'asdasdsad'
                },
                {
                    name: 'asdasdsad'
                }
            ],
            options: [
                {
                    value: 'guangdong',
                    label: '广东省',
                    children: [
                        {
                            value: 'guangzhou',
                            label: '广州市',
                            children: [
                                {
                                    value: 'tianhe',
                                    label: '天河区'
                                },
                                {
                                    value: 'haizhu',
                                    label: '海珠区'
                                }
                            ]
                        },
                        {
                            value: 'dongguan',
                            label: '东莞市',
                            children: [
                                {
                                    value: 'changan',
                                    label: '长安镇'
                                },
                                {
                                    value: 'humen',
                                    label: '虎门镇'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'hunan',
                    label: '湖南省',
                    children: [
                        {
                            value: 'changsha',
                            label: '长沙市',
                            children: [
                                {
                                    value: 'yuelu',
                                    label: '岳麓区'
                                }
                            ]
                        }
                    ]
                }
            ],
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: true,
                type: ['步步高'],
                resource: '小天才',
                desc: '',
                options: []
            },
            options2: [
                {
                    value: 'zhinan',
                    label: '指南',
                    children: [
                        {
                            value: 'shejiyuanze',
                            label: '设计原则',
                            children: [
                                {
                                    value: 'yizhi',
                                    label: '一致'
                                },
                                {
                                    value: 'fankui',
                                    label: '反馈'
                                },
                                {
                                    value: 'xiaolv',
                                    label: '效率'
                                },
                                {
                                    value: 'kekong',
                                    label: '可控'
                                }
                            ]
                        },
                        {
                            value: 'daohang',
                            label: '导航',
                            children: [
                                {
                                    value: 'cexiangdaohang',
                                    label: '侧向导航'
                                },
                                {
                                    value: 'dingbudaohang',
                                    label: '顶部导航'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'zujian',
                    label: '组件',
                    children: [
                        {
                            value: 'basic',
                            label: 'Basic',
                            children: [
                                {
                                    value: 'layout',
                                    label: 'Layout 布局'
                                },
                                {
                                    value: 'color',
                                    label: 'Color 色彩'
                                },
                                {
                                    value: 'typography',
                                    label: 'Typography 字体'
                                },
                                {
                                    value: 'icon',
                                    label: 'Icon 图标'
                                },
                                {
                                    value: 'button',
                                    label: 'Button 按钮'
                                }
                            ]
                        },
                        {
                            value: 'form',
                            label: 'Form',
                            children: [
                                {
                                    value: 'radio',
                                    label: 'Radio 单选框'
                                },
                                {
                                    value: 'checkbox',
                                    label: 'Checkbox 多选框'
                                },
                                {
                                    value: 'input',
                                    label: 'Input 输入框'
                                },
                                {
                                    value: 'input-number',
                                    label: 'InputNumber 计数器'
                                },
                                {
                                    value: 'select',
                                    label: 'Select 选择器'
                                },
                                {
                                    value: 'cascader',
                                    label: 'Cascader 级联选择器'
                                },
                                {
                                    value: 'switch',
                                    label: 'Switch 开关'
                                },
                                {
                                    value: 'slider',
                                    label: 'Slider 滑块'
                                },
                                {
                                    value: 'time-picker',
                                    label: 'TimePicker 时间选择器'
                                },
                                {
                                    value: 'date-picker',
                                    label: 'DatePicker 日期选择器'
                                },
                                {
                                    value: 'datetime-picker',
                                    label: 'DateTimePicker 日期时间选择器'
                                },
                                {
                                    value: 'upload',
                                    label: 'Upload 上传'
                                },
                                {
                                    value: 'rate',
                                    label: 'Rate 评分'
                                },
                                {
                                    value: 'form',
                                    label: 'Form 表单'
                                }
                            ]
                        },
                        {
                            value: 'data',
                            label: 'Data',
                            children: [
                                {
                                    value: 'table',
                                    label: 'Table 表格'
                                },
                                {
                                    value: 'tag',
                                    label: 'Tag 标签'
                                },
                                {
                                    value: 'progress',
                                    label: 'Progress 进度条'
                                },
                                {
                                    value: 'tree',
                                    label: 'Tree 树形控件'
                                },
                                {
                                    value: 'pagination',
                                    label: 'Pagination 分页'
                                },
                                {
                                    value: 'badge',
                                    label: 'Badge 标记'
                                }
                            ]
                        },
                        {
                            value: 'notice',
                            label: 'Notice',
                            children: [
                                {
                                    value: 'alert',
                                    label: 'Alert 警告'
                                },
                                {
                                    value: 'loading',
                                    label: 'Loading 加载'
                                },
                                {
                                    value: 'message',
                                    label: 'Message 消息提示'
                                },
                                {
                                    value: 'message-box',
                                    label: 'MessageBox 弹框'
                                },
                                {
                                    value: 'notification',
                                    label: 'Notification 通知'
                                }
                            ]
                        },
                        {
                            value: 'navigation',
                            label: 'Navigation',
                            children: [
                                {
                                    value: 'menu',
                                    label: 'NavMenu 导航菜单'
                                },
                                {
                                    value: 'tabs',
                                    label: 'Tabs 标签页'
                                },
                                {
                                    value: 'breadcrumb',
                                    label: 'Breadcrumb 面包屑'
                                },
                                {
                                    value: 'dropdown',
                                    label: 'Dropdown 下拉菜单'
                                },
                                {
                                    value: 'steps',
                                    label: 'Steps 步骤条'
                                }
                            ]
                        },
                        {
                            value: 'others',
                            label: 'Others',
                            children: [
                                {
                                    value: 'dialog',
                                    label: 'Dialog 对话框'
                                },
                                {
                                    value: 'tooltip',
                                    label: 'Tooltip 文字提示'
                                },
                                {
                                    value: 'popover',
                                    label: 'Popover 弹出框'
                                },
                                {
                                    value: 'card',
                                    label: 'Card 卡片'
                                },
                                {
                                    value: 'carousel',
                                    label: 'Carousel 走马灯'
                                },
                                {
                                    value: 'collapse',
                                    label: 'Collapse 折叠面板'
                                }
                            ]
                        }
                    ]
                },
                {
                    value: 'ziyuan',
                    label: '资源',
                    children: [
                        {
                            value: 'axure',
                            label: 'Axure Components'
                        },
                        {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        },
                        {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }
                    ]
                }
            ],
            options3:[
                {
                    value: 'ziyuan',
                    label: '资源',
                    children: [
                        {
                            value: 'axure',
                            label: 'Axure Components'
                        },
                        {
                            value: 'sketch',
                            label: 'Sketch Templates'
                        },
                        {
                            value: 'jiaohu',
                            label: '组件交互文档'
                        }
                    ]
                }
            ],
            dialogVisible: false,
            // defaultSrc: require('../../assets/img/img.jpg'),
            fileList: [],
            imgSrc: '',
            radio: 0,
            textareaImgLen:0,
        };
    },
    created() {
        this.cropImg = this.defaultSrc;
      
    },
    methods: {
        changeCascader(e,index,type){
            if(type===3 || type===4 || type===5){
                //console.log(e)
                this.linkSkipList[index].oneRelevantId=e[0]
                this.linkSkipList[index].twoRelevantId=e[1]
            }
             if(type===6 || type===7){
                //console.log(e)
                this.linkSkipList[index].oneRelevantId=e[0]
                this.linkSkipList[index].twoRelevantId=e[1]
                this.linkSkipList[index].threeRelevantId=e[2]
            }
        },
        change(value, render) {
            // render 为 markdown 解析后的结果
            this.html = render;
            // //console.log(value);
            // //console.log(render);
            let arr =render.split('img')
            this.textareaImgLen=arr.length
            //删除图片 删除linkList数据
            // if(arr.length<this.defaultLength){
            //     arr.forEach((item,index)=>{
            //         // if(item.)
            //     })
            // }
            // this.defaultLength=arr.length
           arr.forEach((item,index) => {
            //    //console.log(index,this.textImgChoiseList.length)
            
               if(index>this.textImgChoiseList.length){
                //    item='imgId='+index+item
                    //console.log(item);

                   this.textImgChoiseList.push(JSON.parse(JSON.stringify(this.toPathType)))
                    this.linkSkipList.push(JSON.parse(JSON.stringify(this.defaultObj)))
               }
                    //  //console.log(arr);
                    //  //console.log(arr);
                    //  //console.log(arr);
                    //  //console.log(arr);
           });
        //    this.textImgChoiseList.splice(0,1)
            // arr[1]=`alt='${this.radio}'` +arr[1]
            // //console.log(arr)
            // //console.log(this.textImgChoiseList)
        },
        // submit() {
        //     //console.log(this.content);
        //     //console.log(this.html);
        //     this.$message.success('提交成功！');
        // },

        $imgAdd(pos, $file) {
            var formdata = new FormData();
            formdata.append('file', $file);
            // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
            this.$axios({
                url: '/common/upload',
                method: 'post',
                data: formdata,
                headers: { 'Content-Type': 'multipart/form-data' }
            }).then((url) => {
                this.$refs.md.$img2Url(pos, url);
            });
        },
        changeRadio(e) {
            //console.log(e);
            this.radio = e;
        },
        changeTextRadio(e,index){
            // //console.log(e)
            // //console.log(index)
            this.linkSkipList[index].linkSkipType=e
        },
        changeSeleSearch(e,index,type){
                this.linkSkipList[index].oneRelevantId=e
              //console.log(e)
            //console.log(index)
        },
        onSubmit() {
            
             let arr =this.html.split('img')
             for(let i= 0;i<arr.length;i++){
                  let str =JSON.stringify(this.linkSkipList[i-1])
                 if(i!=0){
                     arr[i]=`<img alt='${str}'` +arr[i]
                 }
             }
             
             //console.log(arr)
             //console.log(this.linkSkipList)
            //  //console.log(arr.join(''))
            let sss =''
            arr.forEach((item,index)=>{
                sss+=item
            })

            // this.textareaImgLen=arr.length
        //      arr.forEach((item,index) => {
        //     //    //console.log(index,this.textImgChoiseList.length)
        //        if(index>this.textImgChoiseList.length)
        //             this.textImgChoiseList.push(JSON.parse(JSON.stringify(this.toPathType)))
        //             this.linkSkipList.push(JSON.parse(JSON.stringify(this.defaultObj)))
        //    });
        //    this.textImgChoiseList.splice(0,1)
           
            this.$message.success('提交成功！');
        },
        setImage(e) {
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (event) => {
                this.dialogVisible = true;
                this.imgSrc = event.target.result;
                this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
        },
        cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        imageuploaded(res) {
            //console.log(res);
        },
        handleError() {
            this.$notify.error({
                title: '上传失败',
                message: '图片上传接口上传失败，可更改为自己的服务器接口'
            });
        }
    }
};
</script>
<style scoped>
.editor-btn {
    margin-top: 20px;
}
/* .el-form-item__content{
    width: 1200px !important;
} */
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>